<template>
  <div class='seeDeviceListStaus'>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <h3>设备名称： {{deviceRow.name}}</h3>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h3>设备总数： {{pagination.total}}</h3>
        </div>
      </el-col>
    </el-row>
    <el-divider content-position="left">
      <h3>设备列表</h3>
    </el-divider>
    <div>
      <el-input placeholder="请输入内容" size="small" style="width:300px;" v-model="searchForm.name" class="input-with-select">
        <el-button slot="append" type="success" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </div>
    <el-table :data="tableData" style="width: 100%;margin-top:10px" fit @selection-change="onSelectionChange" :max-height="maxHeight" border stripe size="mini" highlight-current-row
      :header-cell-style="{background:'#e5e5e5',color:'#000'}">
      <el-table-column type="selection" width="40" fixed="left" />
      <el-table-column prop="name" label="设备名称" />
      <el-table-column prop="nodeId" label="设备唯一标识码" />
      <el-table-column prop="nodeType" label="节点类型">
        <template slot-scope="scope">
          <span v-if="scope.row.nodeType == 'ENDPOINT'" style="color: #0066ff">终端设备</span>
          <span v-if="scope.row.nodeType == 'GATEWAY'" style="color: #0066ff">网关设备</span>
          <span v-if="scope.row.nodeType == 'UNKNOW'" style="color: #0066ff">未知设备</span>
        </template>
      </el-table-column>
      <el-table-column prop="protocolType" label="协议类型" />
      <el-table-column prop="status" label="设备状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 'ONLINE'" style="color: #0066ff">在线</span>
          <span v-if="scope.row.status == 'OFFLINE'" style="color: red">离线</span>
          <span v-if="scope.row.status == 'INACTIVE'" style="color: red">未注册</span>
        </template>
      </el-table-column>
      <el-table-column prop="mute" label="设备是否冻结">
        <template slot-scope="scope">
          <span v-if="scope.row.mute == 'FALSE'" style="color: #0066ff">否</span>
          <span v-if="scope.row.mute == 'TRUE'" style="color: red">是</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="110">
      </el-table-column>
    </el-table>
    <div style="text-align:right">
      <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
    </div>

  </div>
</template>

<script>
import * as api from '@/api/link/device'
import * as deviceGroup from '@/api/link/deviceGroup'


export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeName: "first",
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      searchForm: {},
      dialogSearchForm: {},
      deviceRow: {},
      multipleSelection: [],
      multipleSelectionOther: [],
    }
  },
  //监听属性 类似于data概念
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 340
    }
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.search()
    console.log(this.$route.query, 'this.$route.query====');
    this.deviceRow = Object.assign(this.$route.query)
  },
  methods: {
    onClosed() {
      this.dialogSearchForm = {}
    },

    onSelectionChange(val) {
      this.multipleSelectionOther = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    search() {
      const p = Object.assign(this.searchForm, this.pagination)
      api.getAppStatus(p).then(resp => {
        this.tableData = resp.data.list
        this.pagination = resp.data.pagination
        this.pagination.page = resp.data.pagination.current
      })
    },

    getPageList() {
      this.search()
    },
    getDialogPageList() {
      this.dialogSearch()
    },

    handleSave() {
      if (!this.multipleSelection.length) {
        this.$message({
          message: '请选择设备进行绑定',
          type: 'warning'
        });
        return
      }
      var nodeIds = []
      this.multipleSelection.map(item => {
        nodeIds.push(item.nodeId)
      })
      var p = {
        groupId: this.deviceRow.id,
        nodeIds: nodeIds.join(',')
      }
      deviceGroup.saveBatch(p).then(resp => {
        this.$message({
          message: '关联成功',
          type: 'success'
        });
        this.search()
        this.dialogVisible = false
      })
    }
  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.seeDeviceListStaus {
  padding: 20px;
}
</style>